<template>
  <!-- <div class="downCompent">  -->
  <div class="peosonResultListBox main w" style="background-color:#fff">
    <p class="peosonResultTitle">日常评价结果下载</p>
    <div class="block downCompent">
      <span class="demonstration">根据所需时间段导出:</span>
      <el-date-picker
        v-model="value7"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="getSTime"
      ></el-date-picker>
      <el-button
        class="el-button-inner"
        size="small"
        type="danger"
        @click="handleDown()"
        icon="el-icon-download"
        style="margin-left:5px"
      >下载</el-button>
    </div>
  </div>
</template>
<style scoped>
.downCompent > .el-table_inner {
  font-family: "Microsoft" !important;
  font-size: 20px !important;
  border: 1px solid #e8e8e8;
  box-shadow: 0px 6px 14px #e8e8e8;
}
.el-button-inner {
  font-size: 18px;
}
.demonstration {
  font-size: 22px;
  margin-right: 5px;
}
</style>

<script>
export default {
  data() {
    return {
      value7: "",
      startTime: "", //开始时间
      endTime: "", //结束时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {
    getSTime(val) {
      //获取时间戳 val就是时间戳
      let start = val[0]; //开始
      let end = val[1]; //结束
      // 开始时间
      this.startTime =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1 < 10
          ? "0" + (start.getMonth() + 1)
          : start.getMonth() + 1) +
        "-" +
        (start.getDate() < 10 ? "0" + start.getDate() : start.getDate()) +
        " " +
        (start.getHours() < 10 ? "0" + start.getHours() : start.getHours()) +
        ":" +
        (start.getMinutes() < 10
          ? "0" + start.getMinutes()
          : start.getMinutes()) +
        ":" +
        "00";
      // console.log("开始", this.startTime);
      // 结束时间
      this.endTime =
        end.getFullYear() +
        "-" +
        (end.getMonth() + 1 < 10
          ? "0" + (end.getMonth() + 1)
          : end.getMonth() + 1) +
        "-" +
        (end.getDate() < 10 ? "0" + end.getDate() : end.getDate()) +
        " " +
        (end.getHours() < 10 ? "0" + end.getHours() : end.getHours()) +
        ":" +
        (end.getMinutes() < 10 ? "0" + end.getMinutes() : end.getMinutes()) +
        ":" +
        "00";
      // console.log("截止", this.endTime);
    },

    // 下载文件
    handleDown() {
      let url = `api/message/dowland?startTime=${this.startTime}&endTime=${
        this.endTime
      }`;

      this.$axios({
        method: "get",
        url: url,
        responseType: "blob"
      })
        .then(
          function(response) {
            let filename = "日常评价结果.xls";
            this.fileDownload(response.data, filename);
          }.bind(this)
        )
        .catch(
          function(error) {
            alert("网络请求出错");
          }.bind(this)
        );
    },
    fileDownload(data, fileName) {
      let blob = new Blob([data], {
        type: "application/octet-stream"
      });
      let filename = fileName || "filename.xls";
      if (typeof window.navigator.msSaveBlob !== "undefined") {
        window.navigator.msSaveBlob(blob, filename);
      } else {
        var blobURL = window.URL.createObjectURL(blob);
        var tempLink = document.createElement("a");
        tempLink.style.display = "none";
        tempLink.href = blobURL;
        tempLink.setAttribute("download", filename);
        if (typeof tempLink.download === "undefined") {
          tempLink.setAttribute("target", "_blank");
        }
        document.body.appendChild(tempLink);
        tempLink.click();
        document.body.removeChild(tempLink);
        window.URL.revokeObjectURL(blobURL);
      }
    }
    // handleDown() {
    //   // console.log("123", index, "asdas", row);
    //   let url = `api/message/dowland?startTime=${this.startTime}&endTime=${this.endTime}`;
    //   this.$axios({
    //     method: "get",
    //     url: url,
    //     responseType: "blob"
    //   }).then(data => {
    //     if (!data) {
    //       return;
    //     }
    //     // debugger
    //     //下载弹窗
    //     let url = window.URL.createObjectURL(data.data);
    //     let link = document.createElement("a");
    //     link.style.display = "none";
    //     link.href = url;
    //     link.setAttribute("download", "日常评价结果" + ".xls");
    //     document.body.appendChild(link);
    //     link.click();
    //   });
    // }
  }
};
</script>